<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM（针对页面操作）+BOM（针对浏览器）
		学习主题：针对页面操作比较多---DOM操作
		JQuery操作DOM：理解：JQ框架改变页面内容效果
		js基础就可以直接学习，了解函数使用
		基础函数---事件源之后出现，事件源语法糖中
		html()   作用：增加一个元素，覆盖原有的html
		val()    作用：针对input元素，实现修改文本框内容
		text()   作用：生成文本内容
		 -->
	</head>
	<script src="js/jquery-1.11.1.js"></script>
	<body>
		<!--  鼠标点击按钮，然后，改变下面产生一行文本 -->
		 <button>按钮</button>
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis suscipit ipsa consequuntur ad esse mollitia nihil, sint nam, facilis enim cupiditate quidem autem blanditiis nobis maiores fuga. Illum, quasi magni!
		</p>
		<div style=" width: 200px;
				 height: 200px;
				 background: #000;"></div>
		<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, facere dolorem laudantium quidem quos cumque consectetur doloribus libero earum nemo expedita facilis fugit est quasi, animi voluptatem iure, a esse.
		</h3>
		
		<input type="button" value="按钮2"/>
		<input type="text" />
		<script>
			$("button").click(function(){
				/* JQ操作DOM--html()函数使用 */
				$("p").html("<h1>我是你爸爸</h1>");
			});
			/* 练习：div 200*200  背景颜色自定，鼠标滑过之后，
			下面内容修改：<h3>提示，修改为黄色 */
			$("div").mouseenter(function(){
				$("h3").html("<h3>黄颜色</h3>")
			});
			/* 练习2：  按钮 文本框   点击按钮，增加一行文字 */
			$("input[type='button']").click(function(){
			$("input[type='text']")	.val("文本框内容修改");
			});
			/* 利用JQ操作DOM（页面效果）：1.元素内容操作（3个函数）
			                            html()
										val()
										text()
			                            2.属性操作（4个函数）
										<p align="center">
										attr()
										removeAttr()
										<input checked>
										prop()
										removeProp()
										3.样式类名操作（4个函数）
										.demo{属性：属性值..}
										addClass()
										removeClass()
										toggleClass()
										hasClass()
										4.元素样式操作（5个函数）
										css()
										width()和height()
										outerWidth()和outerHeight()
										语法：css("css属性","css属性值")
										          display    none/block
										5.插入和删除和修改操作（7个函数）
										6.元素遍历操作（6个函数）
										7.JQ动画操作（7个函数）
			 */
		</script> 
		
		
			
		
	</body>
</html>